<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 500px;
				height: 1100px;
				position: relative;
			}

			img {
				width: 100%;
				height: 100%;
			}

			input {
				height: 100px;
				width: 300px;
			}

			span {
				position: absolute;
				width: 100%;
				top: 90%;
				left: 0;
				text-align: center;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<input type="button" name="" id="" value="开始" />
		<div>
			<img src="./10.jpg">
			<span></span>
		</div>

		<script type="text/javascript">
			var btn = document.getElementsByTagName("input")[0];
			var img = document.querySelector("img");
			var span = document.querySelector("span");
			var index = 0;
			console.log(btn, img);
			var flag = true;
			var arr = ["壁纸1", "壁纸2", "壁纸3", "壁纸4", "壁纸5", "壁纸6", "壁纸7"];
			btn.onclick = function() {
				if (flag) {
					timerId = setInterval(function() {
							span.innerHTML = arr[index];
							img.src = "./" + (index + 10) + ".jpg";
							index++;
							console.log(index)
							if (index > arr.length - 1) {
								index = 0
							}
						},
						200)
					btn.value = "结束"
				} else {
					clearInterval(timerId);
					btn.value = "开始";
				}

				flag = !flag;

			}
		</script>
	</body>
</html>
